<template>
  <div>
    <el-dialog
      title="信用量明细"
      :visible.sync="dialogFormVisible"
      width="1104px"
      class="tableDialog"
      :close-on-click-modal="false">
      <section>
        <el-form ref="form" :model="queryForm" label-width="82px" :inline="true" class="queryForm">

        </el-form>
      </section>
      <div>
        <p class="title">{{title}}</p>
      </div>


      <el-table size="mini" v-loading="loading" :data="tableData" style="width: 100%;" border
                :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName"
                >
        <el-table-column type="index" label="序号" width="60" align="center">
          <template slot-scope="scope">
          <span>{{
              (page.pageNo - 1) * page.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountDealType" label="类型" min-width="80">
			<template slot-scope="scope">
			  {{$dictUtils.getDictLabel("accountDealType", scope.row.accountDealType, "")}}
			</template>
		</el-table-column>
        <el-table-column prop="listDate" label="日期" min-width="200"></el-table-column>
        <el-table-column prop="listCode" label="单据编号" min-width="150"></el-table-column>
        <el-table-column prop="businessCode" label="业务编号" min-width="150"></el-table-column>
        <el-table-column prop="truckNumber" label="车牌号" min-width="100"></el-table-column>
        <el-table-column prop="productQuatity" label="使用数量" min-width="100"></el-table-column>
        <el-table-column prop="endQuatity" label="剩余数量" min-width="100"></el-table-column>
        <el-table-column prop="remarks" label="备注" min-width="200"></el-table-column>
      </el-table>

        <!-- 弹窗, 新增 / 修改 -->
      <div>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="page.pageSize"
                     :current-page="page.pageNo" layout="total,prev, pager, next" :total="page.total">
      </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>

<script>

import {  getDoList,delCrm, editState, getCreditInfo, isCheck} from '@/api/market/companyProductCredit.js'
import PopoverBut from '@/components/button/popoverBut'
const options1 = []
const cityOptions = ['上海', '北京']
export default {
  components: {
    PopoverBut
  },
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,

      checkedProps: options1,
      companyProductCreditId: '',
      title: '',
      msg: '',
      data: [],
      repeatIds: [],
      companyProductCredit: {
        id: '',
        companyName: '',
		productName: ''
      },
      ShowCloum: {
        createDate: ''
      },
      options: [
        {
          label: '创建人',
          key: 'createBy.loginName'
        },
        {
          label: '创建时间',
          key: 'createDate'
        }, {
          label: '上次操作人',
          key: 'updateBy.loginName'
        },
        {
          label: '上次操作时间',
          key: 'updateDate'
        }
      ],
      orderBy: {
        name: 'update_date',
        method: 'desc'
      },
      loading: false,
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      props: 1,
      queryForm: {
        checkedCities: 0,
        productName: '',
        productId: ''
      },
      checkedCities: [],
      cities: cityOptions
    }
  },
  methods: {
    init (row) {
	  this.title = row.productName+'-'+row.companyName
      this.dialogFormVisible = true
	  this.companyProductCreditId = row.id
	  this.companyProductCredit.id = row.id
      this.getList(this.page, this.orderBy.name, this.orderBy.method)
    },
    // 获取列表带分页
    getList (params, orderName, orderByAORC, queryNames, queryState) {
      this.loading = true
      getDoList({
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        orderBy: orderName,
		companyProductCreditId:this.companyProductCreditId,
        companyAccountId: this.companyAccountId,
        orderByAORC: orderByAORC,
        names: queryNames,
        state: queryState
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.result.list
          this.page.total = res.data.result.count
        }
        this.loading = false
      })
    },

    // 是否显示某列数据
    handlerCloumn (e) {
      this.checkedProps = e
      // console.log(e)
    },
    handleClose (done) {
      this.$confirm('确认关闭？','提示')
        .then(_ => {
          done()
          this.$emit('refreshDataList')
        })
        .catch(_ => {
        })
    },
    handleSizeChange () {},
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getList(this.page, this.orderBy.name, this.orderBy.method)
      console.log(e)
    },
    tableRowClassName ({
                        row,
                        rowIndex
                      }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.page.pageSize = val
      this.page.pageNo = 1
      this.getDoList(this.page, this.orderBy.name, this.orderBy.method)
    }
  }
}
</script>
<style lang="scss" scoped>
  .title{
    margin-bottom: 15px;
	font-size: 16px;
	font-weight: 700;
  }
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
.from-container {
  margin-bottom: 10px;
}

.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table__column-filter-trigger{
  position: absolute;
  right: 15px;
}
.addBtn{
  margin: 20px 0;
}
</style>
